<template>
	<div class="left-panel" ref="innerPlane">
		<a-tabs
			class="tab-wrapper"
			:class="[fold ? undefined : 'no-tab-content']"
			v-model:activeKey="activeKey"
			tabPosition="left"
			destroyInactiveTabPane>
			<a-tab-pane v-for="item in menuList" :key="item.name">
				<!-- 自定义tabbar -->
				<template #tab>
					<div class="tab-box" @click="tabClick(item.id)">
						<a-tooltip placement="right">
							<template #title>
								<span>{{ item.title }}</span>
							</template>
							<component :style="{ fontSize: '18px', margin: '0px' }" :is="item.icon" />
						</a-tooltip>
					</div>
				</template>
				<Transition>
					<div
						class="menu-box"
						v-if="fold"
						:style="{
							maxHeight: sketchRuleState.rulerOpts.height + 'px',
							width: isFixed ? '300px' : '350px',
							position: isFixed ? 'absolute' : 'relative',
							boxShadow: isFixed ? '10px 0 15px rgba(0, 0, 0, 0.2)' : 'none',
						}">
						<!-- 图层 -->
						<layerList v-if="item.name === 'layer'" />
						<!-- 组件库 -->
						<CpnsLibary
							v-else-if="item.name === 'cpnList'"
							:cpnsLibary="item.child"
							@handleDragCpn="handleDragCpn"></CpnsLibary>
						<!-- 右上角的icon按钮 -->
						<div class="act-icon-wrapper">
							<PushpinOutlined
								class="fixed-icon"
								:style="{ color: isFixed ? '#1677ff' : '#000000' }"
								@click="handleActIcon('fixed')" />
							<CloseOutlined class="close-icon" @click="handleActIcon('close')" />
						</div>
					</div>
				</Transition>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script setup>
import {
	GoldOutlined,
	AppstoreAddOutlined,
	PushpinOutlined,
	CloseOutlined,
} from "@ant-design/icons-vue";
import layerList from "./components/LayerList.vue";
import CpnsLibary from "./components/CpnsLibary.vue";
import { basicCpns, borderCpns, decorateCpns} from "@/utils/LowCode/config.js";
import { guid } from "@/utils";
import { ref, computed } from "vue";
import { useSketchRuleStore } from "@/stores/sketchRule";
import { storeToRefs } from "pinia";
const sketchRuleStore = useSketchRuleStore();
const { sketchRuleState } = storeToRefs(sketchRuleStore);
const innerPlane = ref();
const emits = defineEmits(["dragCurrentCpn", "updateLeftPanel"]);
const activeKey = ref("basics");
const fold = ref(false); // 折叠
const isFixed = ref(false); // 固定

const menuList = ref([
	{
		id: guid(),
		name: "layer",
		title: "图层",
		icon: GoldOutlined,
		components: "",
	},
	{
		id: guid(),
		name: "cpnList",
		title: "组件库",
		icon: AppstoreAddOutlined,
		child: [
			{
				id: guid(),
				name: "basics",
				title: "基础",
				components: basicCpns,
			},
			{
				id: guid(),
				name: "border",
				title: "边框",
				components: borderCpns,
			},
			{
				id: guid(),
				name: "decorate",
				title: "装饰",
				components: decorateCpns,
			},
		],
	},
]);
const activeTabId = ref(-1);
const cpnFileType = (name) =>
	computed(() => {
		switch (name) {
			case "border":
				return "borderComponents";
			case "decorate":
				return "decorateComponents";
			case "border":
				return "borderComponents";
		}
	});
//拖拽组件时触发
const handleDragCpn = (e, cpn, type) => {
	const cpnInfo = {
		cpnType: type,
		...cpn,
	};
	emits("dragCurrentCpn", cpnInfo);
};
let timer = null
// 更新画布的大小
const updateCanvas = () => {
	if(timer) clearTimeout(timer)
	timer = setTimeout(() => {
		emits("updateLeftPanel", innerPlane.value.offsetWidth);
	})
};
// 控制左侧菜单栏伸缩
const tabClick = (id) => {
	if (id === activeTabId.value) {
		fold.value = !fold.value;
	} else {
		fold.value = true;
	}
	activeTabId.value = id;
	updateCanvas();
};
const handleActIcon = async (t) => {
	switch (t) {
		case "fixed":
			isFixed.value = !isFixed.value;
			updateCanvas();
			break;
		case "close":
			fold.value = false;
			updateCanvas();
			break;
	}
};
defineExpose({
	innerPlane,
});
</script>
<style scoped lang="scss">
.left-panel {
	height: calc(100vh - 60px);
	.tab-wrapper {
		height: 100%;
		:deep(.ant-tabs-tab) {
			padding: 10px 0px;
		}
		.tab-box {
			width: 50px;
			height: 100%;
			padding: 10px 0;
		}
		.menu-box {
			position: absolute;
			z-index: 9;
			width: 350px;
			height: calc(100vh - 60px);
			overflow: auto;
			background: #ffffff;

			.act-icon-wrapper {
				position: absolute;
				display: flex;
				gap: 10px;
				top: 20px;
				right: 10px;
				.fixed-icon {
					cursor: pointer;
					&:hover {
						color: #1677ff;
					}
				}
				.close-icon {
					cursor: pointer;
					&:hover {
						color: #1677ff;
					}
				}
			}
		}
	}
}
.no-tab-content {
	:deep(.ant-tabs-content-holder) {
		display: none;
	}
}
:deep(.ant-tabs-tabpane) {
	padding: 0px !important;
}
:deep(.ant-card) {
	border-radius: 0px !important;
}
.v-enter-active,
.v-leave-active {
	transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
	opacity: 0;
}
</style>
